<template>
  <div>
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="作业(点击)" />
      <van-dropdown-item v-model="value2" :options="option2" title="班级(点击)" />
    </van-dropdown-menu>
    <div v-if="filteredData.length > 0">
      <h2 class="gg">搜索结果：</h2>
      <ul>
        <li v-for="item in filteredData" :key="item.id">
          <span class="taskText">{{ item.taskText }}</span>
          <span class="classText">{{ item.classText }}</span>~{{ item.name }}
          <button @click="showFeedbackForm(item.id)">反馈</button>
          <span v-if="item.hasFeedback">（已反馈）</span>
          <div v-if="item.showFeedbackForm" class="feedback-form">
            <textarea v-model="item.feedbackContent"></textarea>
            <button @click="submitFeedback(item.id)">提交反馈</button>
            <button @click="item.showFeedbackForm = false">取消</button>
          </div>
          <span v-if="item.feedbackCount > 0">（{{ item.feedbackCount }}）</span>
        </li>
      </ul>
    </div>
    <div v-else>
      <p class="nn">没有找到匹配的结果。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watchEffect } from 'vue';

const searchValue = ref('');
const value1 = ref(null);
const value2 = ref(null);

const option1 = [
  { text: 'java(按)', value: 0 },
  { text: 'c++(按)', value: 1 },
  { text: 'vue3(按)', value: 2 },
];

const option2 = [
  { text: '自动化1(按)', value: 'a' },
  { text: '数字化2(按)', value: 'b' },
  { text: '物联网3(按)', value: 'c' },
];

const randomData = reactive(generateRandomData(8));

function generateRandomData(numItems) {
  const randomData = [];
  for (let i = 0; i < numItems; i++) {
    const randomTask = option1[Math.floor(Math.random() * option1.length)];
    const randomClass = option2[Math.floor(Math.random() * option2.length)];
    const randomname = "学生名" + Math.floor(Math.random() * 10);
    const newDataItem = {
      id: i,
      taskText: randomTask.text,
      classText: randomClass.text,
      name: randomname,
      hasFeedback: false, // 添加一个 hasFeedback 属性来表示是否有反馈
    };
    randomData.push(newDataItem);
  }
  return randomData;
}

const filteredData = computed(() => {
  return randomData.filter(item => {
    return (
      (value1.value === null || item.taskText === option1.find(option => option.value === value1.value).text) &&
      (value2.value === null || item.classText === option2.find(option => option.value === value2.value).text) &&
      (searchValue.value === '' || item.taskText.includes(searchValue.value) || item.classText.includes(searchValue.value) || item.name.includes(searchValue.value))
    );
  });
});

function toggleFeedback(id) {
  const item = randomData.find(item => item.id === id);
  if (item) {
    item.hasFeedback = !item.hasFeedback;
    if (item.hasFeedback) {
      item.feedbackCount += 1; 
    } else {
      item.feedbackCount -= 1;
    }
  }
}



watchEffect(() => {
  // 当筛选条件变化时，可以执行一些副作用，比如日志记录或外部 API 调用
  console.log('筛选条件变化，当前筛选结果：', filteredData.value);
});
const showFeedbackForm = (studentId) => {
  // 找到对应的学生对象
  const student = randomData.find(item => item.id === studentId);
  if (student) {
    // 显示反馈表单
    student.showFeedbackForm = true;
  }
};
const submitFeedback = (studentId) => {
  // 找到对应的学生对象
  const student = randomData.find(item => item.id === studentId);
  if (student) {
    // 处理反馈内容
    // 例如，将反馈内容存储到服务器或进行其他操作
    console.log('Feedback received:', student.feedbackContent);

    // 关闭反馈表单
    student.showFeedbackForm = false;
    student.feedbackContent = ''; // 清空反馈内容
  }
};
</script>


<style>
.gg{
  font-size: 40px;
}
h2{
  font-size:30px
}
li {
  margin: 4px 0; /* 添加一些外边距，以便列表项之间有空间 */
  font-size:20px;
  text-align: left 
}
.van-ellipsis
{
  font-size:20px;
  font-weight:bold;
  margin: 0px 0px;
  
}
#van-search-18-input{
  width:300px;
  height:40px;
}
.nn{
  font-size:30px

}
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
}

/* 搜索栏样式 */
.van-search {
  margin: 20px;
  border-radius: 5px;
}

/* 下拉菜单样式 */
.van-dropdown-menu {
  margin: 0 20px;
}

/* 结果列表样式 */
ul {
  list-style: none;
  padding: 0;
}

li {
  background-color: #fff;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

li:hover {
  transform: translateY(-5px);
}

.taskText, .classText {
  font-weight: bold;
}

button {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

.feedback-form {
  margin-top: 10px;
}

textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical;
}

/* 反馈计数器样式 */
.feedback-count {
  font-size: 0.8em;
  color: #888;
}

/* 没有结果时的样式 */
.nn {
  text-align: center;
  margin: 20px;
  font-size: 1.5em;
  color: #888;
}

/* 标题样式 */
h2 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

/* 其他样式根据需要添加 */
</style>


